<template>
  <div id="shop-theme-2">
    <en-shop-header :shop="shop"/>
    <en-shop-nav :shop="shop"/>
    <en-shop-sildes :shop-id="shop.shop_id"/>
    <theme2-coupons :shop-id="shop.shop_id"/>
    <div class="shop-tags">
      <!--热销商品-->
      <div class="hot-goods">
        <div class="title-hot-goods">
          <h3></h3>
          <span>HOT - SEASON - GOODS</span>
        </div>
        <ul class="list-hot-goods">
          <li v-for="(goods, index) in hotGoods" :key="index" class="item-hot-goods">
            <div class="hot-img">
              <nuxt-link :to="'/goods/' + goods.goods_id">
                <img :src="goods.big" :alt="goods.goods_name">
              </nuxt-link>
            </div>
            <div class="hot-detail">
              <p><nuxt-link :to="'/goods/' + goods.goods_id">{{ goods.goods_name }}</nuxt-link></p>
              <span>RMB：<b>￥{{ goods.price | unitPrice }}</b></span>
              <i>已销售：{{ goods.buy_count }}件</i>
            </div>
          </li>
        </ul>
      </div>
      <!--新品上架-->
      <div class="new-goods">
        <h3></h3>
        <ul class="list-new-goods">
          <li v-for="(goods, index) in newGoods" :key="index" class="item-new-goods">
            <div class="intro-new-goods">
              <h5><nuxt-link :to="'/goods/' + goods.goods_id">{{ goods.goods_name }}</nuxt-link></h5>
              <p>RMB：<i>￥{{ goods.price | unitPrice }}</i></p>
              <label></label>
            </div>
            <div class="img-new-goods">
              <nuxt-link :to="'/goods/' + goods.goods_id">
                <img :src="goods.big" :alt="goods.goods_name">
              </nuxt-link>
            </div>
          </li>
        </ul>
      </div>
      <!--推荐商品-->
      <div class="rec-goods">
        <ul class="list-rec-goods">
          <li v-for="(goods, index) in recGoods" :key="index" class="item-rec-goods">
            <h5><nuxt-link :to="'/goods/' + goods.goods_id">{{ goods.goods_name }}</nuxt-link></h5>
            <div class="img-rec-goods">
              <nuxt-link :to="'/goods/' + goods.goods_id">
                <img :src="goods.big" :alt="goods.goods_name">
              </nuxt-link>
            </div>
            <p>￥{{ goods.price | unitPrice }}<span> (销量：{{ goods.buy_count }})</span></p>
          </li>
        </ul>
      </div>
      <nuxt-link :to="'/shop/goods-list?shop_id=' + shop_id" class="more-goods">更多本店商品 >></nuxt-link>
    </div>
    <div class="shop-detail">
      <h3>关于店铺</h3>
      <h6 v-html="shop.shop_desc || '暂无简介'"></h6>
    </div>
  </div>
</template>

<script>
  import mixin from './themeMixin'
  import theme2Coupons from './-theme2-coupons'
  export default {
    name: 'shop-theme-2',
    mixins: [mixin],
    components: { theme2Coupons }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .title-hot-goods {
    width: 100%;
    padding: 15px 0;
    h3 {
      width: 100%;
      background: url() no-repeat center center;
      background-size: 90%;
      height: 4 * 16px;
    }
    span {
      font-size: 0.7 * 16px;
      display: block;
      text-align: center;
      height: 1.2 * 16px;
      line-height: 1.2 * 16px;
      color: #dedede;
      font-style: italic;
    }
  }
  .list-hot-goods {
    width: 100%;
    overflow: hidden;
  }
  .item-hot-goods {
    display: flex;
    align-items: center;
    padding: 0.4 * 16px 0;
    border-bottom: 1px solid #F2F2F2;
    .hot-img {
      position: relative;
      width: 35%;
      text-align: center;
      img {
        width: 110px;
        height: 110px;
        margin: 0 auto;
      }
    }
    .hot-detail {
      width: 65%;
      p, span, i {
        display: block;
        height: 32px;
        line-height: 16px;
        text-align: left;
        font-weight: 200;
        font-size: 16px;
        margin: 5px 0;
      }
      p a {
        height: 32px;
        color: #53a0be;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      span {
        height: 16px;
        color: #4B4C4C
      }
      i {
        font-size: 14px;
        color: #aaa
      }
    }
  }
  .new-goods {
    width: 100%;
    overflow: hidden;
    background: #fff;
    padding: 15px 0;
    h3 {
      width: 100%;
      height: 4 * 16px;
      background: url() no-repeat center center;
      background-size: 100%;
      margin: 16px 0;
    }
  }
  .list-new-goods {
    width: 95%;
    background: #fff;
    padding-left: 4%;
  }
  .item-new-goods {
    float: left;
    display: flex;
    flex-direction: column;
    background: #fff;
    width: 48%;
    margin: 0 2% 8px 0;
    overflow: hidden;
    position: relative;
    padding: 0.6 * 16px 0;
    &:nth-child(2n-1) .intro-new-goods {
      margin: 0 0 16px 0;
    }
    &:nth-child(2n) {
      flex-direction: column-reverse;
      label {
        top: -8px;
        bottom: auto;
        transform: rotate(180deg);
      }
    }
    .intro-new-goods {
      padding: 8px 5%;
      width: 89%;
      border: 1px solid #8a8a8a;
      position: relative;
      margin: 16px 0 0 0;
      h5 {
        margin: 0 0 16px 0;
        a {
          color: #53a0be;
          height: 32px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
      p {
        font-size: 14px;
        font-weight: 200;
      }
      label {
        width: 32px;
        height: 8px;
        background: url() no-repeat center center #fff;
        background-size: 50%;
        position: absolute;
        left: 40%;
        bottom: -8px;
      }
    }
    .img-new-goods {
      width: 100%;
      text-align: center;
      img {
        width: 90%;
        margin: 0 auto;
        max-width: 200px;
      }
    }
  }
  .rec-goods {
    width: 100%;
    overflow: hidden;
    margin: 8px 0;
    padding: 8px 0 0 0;
    background: #fff;
    border-top: 10px solid #e5e5e5;
  }
  .item-rec-goods {
    text-align: center;
    border-top: 1px dashed #dedede;
    border-bottom: 1px dashed #dedede;
    width: 100%;
    margin: 0 0 16px 0;
    h5 {
      font-size: 16px;
      font-weight: 200;
      width: 80%;
      text-align: center;
      padding: 16px 10% 0 10%;
      height: 32px;
      line-height: 16px;
      margin: 16px 0 0 0;
      text-overflow:ellipsis;
      white-space: nowrap;
      overflow: hidden;
      a {
        color: #53a0be;
        height: 16px;
      }
    }
    .img-rec-goods img {
      width: 60%;
      border: 2px solid #dedede;
    }
    p {
      width: 80%;
      padding: 0 10%;
      font-weight: 300;
      span {
        font-size: 0.7 * 16px;
        color: #bbb;
      }
    }
  }
  .shop-detail {
    text-align: center;
    font-weight: 200;
    width: 90%;
    overflow: hidden;
    margin: 0 0 3 * 16px 0;
    background: #fff;
    padding: 8px 5%;
    border-top: 10px solid #e5e5e5;
    h3 {
      font-size: 16px;
      line-height: 32px;
      font-weight: 200;
      color: #000;
    }
    h6 {
      font-size: 0.7 * 16px;
      line-height: 32px;
      font-weight: 200;
      color: #ccc;
    }
    img {
      object-fit: cover;
    }
  }
</style>
